<template>
  <div class="admin-exhibitor-content">
    <div class="page-header">
      <h2>展商中心内容管理</h2>
      <div class="header-actions">
        <el-button @click="handlePreview">
          <el-icon>
            <View />
          </el-icon>
          预览效果
        </el-button>
      </div>
    </div>

    <!-- 内容管理标签页 -->
    <el-tabs v-model="activeTab" type="border-card" class="content-tabs">
      <!-- 为何参展管理 -->
      <el-tab-pane label="为何参展" name="why-exhibit">
        <div class="tab-content">
          <div class="list-header">
            <h3>为何参展列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('why-exhibit')"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                新增为何参展
              </el-button>
            </div>
          </div>

          <el-table
            :data="getPageList('why-exhibit')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column> -->
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{
                    getContentField(row, "content")
                      ? stripHtml(getContentField(row, "content")).substring(
                          0,
                          20
                        ) + "..."
                      : "暂无内容"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="row.imageUrl"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="row.imageUrl"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="getContentField(row, 'backgroundImage')"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="getContentField(row, 'backgroundImage')"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="getContentField(row, 'videoUrl')"
                  :href="getContentField(row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="row.linkUrl"
                  :href="row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sortOrder"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === "active" ? "已发布" : "草稿" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPageItem(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletePageItem(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 谁来观展管理 -->
      <el-tab-pane label="谁来观展" name="who-exhibit">
        <div class="tab-content">
          <div class="list-header">
            <h3>谁来观展列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('who-exhibit')"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                新增谁来观展
              </el-button>
            </div>
          </div>

          <el-table
            :data="getPageList('who-exhibit')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column> -->
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{
                    getContentField(row, "content")
                      ? stripHtml(getContentField(row, "content")).substring(
                          0,
                          20
                        ) + "..."
                      : "暂无内容"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="row.imageUrl"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="row.imageUrl"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="getContentField(row, 'backgroundImage')"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="getContentField(row, 'backgroundImage')"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="getContentField(row, 'videoUrl')"
                  :href="getContentField(row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="row.linkUrl"
                  :href="row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sortOrder"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === "active" ? "已发布" : "草稿" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPageItem(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletePageItem(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 参展报名管理 -->
      <!-- <el-tab-pane label="参展报名" name="registration">
        <div class="tab-content">
          <div class="list-header">
            <h3>参展报名列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px;"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px;"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button type="primary" size="small" @click="showAddDialog('registration')">
                <el-icon><Plus /></el-icon>
                新增参展报名
              </el-button>
            </div>
          </div>
          
          <el-table :data="getPageList('registration')" v-loading="loading" stripe>
            <el-table-column prop="title" label="标题" min-width="200" />
            <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column>
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{ getContentField(row, 'content') ? stripHtml(getContentField(row, 'content')).substring(0, 20) + '...' : '暂无内容' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div v-if="row.imageUrl" class="image-container" @click="previewImages(row)">
                  <img 
                    :src="row.imageUrl" 
                    style="width: 40px; height: 30px; border-radius: 4px; object-fit: cover;"
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div v-if="getContentField(row, 'backgroundImage')" class="image-container" @click="previewImages(row)">
                  <img 
                    :src="getContentField(row, 'backgroundImage')" 
                    style="width: 40px; height: 30px; border-radius: 4px; object-fit: cover;"
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link v-if="getContentField(row, 'videoUrl')" :href="getContentField(row, 'videoUrl')" target="_blank" type="primary">
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link v-if="row.linkUrl" :href="row.linkUrl" target="_blank" type="primary">
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80" align="center" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === 'active' ? '已发布' : '草稿' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning">推荐</el-tag>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" align="center" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="editPageItem(row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deletePageItem(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane> -->

      <!-- 展商系统管理 -->
      <el-tab-pane label="展商系统" name="exhibitor-system">
        <div class="tab-content">
          <div class="list-header">
            <h3>展商系统列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('exhibitor-system')"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                新增展商系统
              </el-button>
            </div>
          </div>

          <el-table
            :data="getPageList('exhibitor-system')"
            v-loading="loading"
            stripe
          >
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column> -->
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{
                    getContentField(row, "content")
                      ? stripHtml(getContentField(row, "content")).substring(
                          0,
                          20
                        ) + "..."
                      : "暂无内容"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="row.imageUrl"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="row.imageUrl"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="getContentField(row, 'backgroundImage')"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="getContentField(row, 'backgroundImage')"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="getContentField(row, 'videoUrl')"
                  :href="getContentField(row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="row.linkUrl"
                  :href="row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sortOrder"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === "active" ? "已发布" : "草稿" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPageItem(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletePageItem(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 展商服务管理 -->
      <el-tab-pane label="展商服务" name="service">
        <div class="tab-content">
          <div class="list-header">
            <h3>展商服务列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('service')"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                新增展商服务
              </el-button>
            </div>
          </div>

          <el-table :data="getPageList('service')" v-loading="loading" stripe>
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column> -->
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{
                    getContentField(row, "content")
                      ? stripHtml(getContentField(row, "content")).substring(
                          0,
                          20
                        ) + "..."
                      : "暂无内容"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="row.imageUrl"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="row.imageUrl"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="getContentField(row, 'backgroundImage')"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="getContentField(row, 'backgroundImage')"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="getContentField(row, 'videoUrl')"
                  :href="getContentField(row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="row.linkUrl"
                  :href="row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sortOrder"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === "active" ? "已发布" : "草稿" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPageItem(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletePageItem(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 展商评语管理 -->
      <el-tab-pane label="展商评语" name="review">
        <div class="tab-content">
          <div class="list-header">
            <h3>展商评语列表</h3>
            <div class="header-actions">
              <el-input
                v-model="searchText"
                placeholder="搜索标题或描述..."
                style="width: 200px; margin-right: 10px"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <el-select
                v-model="statusFilter"
                placeholder="状态筛选"
                style="width: 120px; margin-right: 10px"
                clearable
                @change="handleFilter"
              >
                <el-option label="已发布" value="active" />
                <el-option label="草稿" value="inactive" />
              </el-select>
              <el-button
                type="primary"
                size="small"
                @click="showAddDialog('review')"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                新增展商评语
              </el-button>
            </div>
          </div>

          <el-table :data="getPageList('review')" v-loading="loading" stripe>
            <el-table-column prop="title" label="标题" min-width="200" />
            <!-- <el-table-column label="副标题" min-width="150">
              <template #default="{ row }">
                {{ getContentField(row, 'subtitle') }}
              </template>
            </el-table-column> -->
            <el-table-column label="内容" min-width="150" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="content-preview" @click="previewContent(row)">
                  {{
                    getContentField(row, "content")
                      ? stripHtml(getContentField(row, "content")).substring(
                          0,
                          20
                        ) + "..."
                      : "暂无内容"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="主图片" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="row.imageUrl"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="row.imageUrl"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="主图片"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="背景图" width="100" align="center">
              <template #default="{ row }">
                <div
                  v-if="getContentField(row, 'backgroundImage')"
                  class="image-container"
                  @click="previewImages(row)"
                >
                  <img
                    :src="getContentField(row, 'backgroundImage')"
                    style="
                      width: 40px;
                      height: 30px;
                      border-radius: 4px;
                      object-fit: cover;
                    "
                    alt="背景图"
                  />
                </div>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="视频链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="getContentField(row, 'videoUrl')"
                  :href="getContentField(row, 'videoUrl')"
                  target="_blank"
                  type="primary"
                >
                  查看视频
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="外部链接" width="120" show-overflow-tooltip>
              <template #default="{ row }">
                <el-link
                  v-if="row.linkUrl"
                  :href="row.linkUrl"
                  target="_blank"
                  type="primary"
                >
                  查看链接
                </el-link>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="sortOrder"
              label="排序"
              width="80"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
              align="center"
            >
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'">
                  {{ row.status === "active" ? "已发布" : "草稿" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="推荐" width="80" align="center">
              <template #default="{ row }">
                <el-tag v-if="getContentField(row, 'isFeatured')" type="warning"
                  >推荐</el-tag
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="160" />
            <el-table-column
              label="操作"
              width="200"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="editPageItem(row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletePageItem(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 轮播图管理 -->
      <el-tab-pane label="轮播图管理" name="carousel">
        <div class="tab-content">
          <CarouselManager
            title="展商中心轮播图管理"
            module-type="exhibitors"
          />
        </div>
      </el-tab-pane>

      <!-- 轮播图管理 -->
      <el-tab-pane label="展品商城轮播图管理" name="carouselExhibitorsShop">
        <div class="tab-content">
          <CarouselManager
            title="展品商城轮播图管理"
            module-type="exhibitors_shop"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加/编辑为何参展对话框 -->
    <el-dialog
      v-model="showWhyExhibitDialog"
      :title="editingWhyExhibit ? '编辑参展理由' : '添加参展理由'"
      width="600px"
    >
      <el-form
        :model="whyExhibitForm"
        ref="whyExhibitFormRef"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="whyExhibitForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="whyExhibitForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrl">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="handleWhyExhibitImageSuccess"
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="whyExhibitForm.imageUrl"
                :src="whyExhibitForm.imageUrl"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="whyExhibitForm.imageUrl"
              placeholder="或直接输入图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number
            v-model="whyExhibitForm.sortOrder"
            :min="0"
            :max="999"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="whyExhibitForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showWhyExhibitDialog = false">取消</el-button>
        <el-button type="primary" @click="saveWhyExhibitItem" :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 添加/编辑谁来观展对话框 -->
    <el-dialog
      v-model="showWhoExhibitDialog"
      :title="editingWhoExhibit ? '编辑参展商类型' : '添加参展商类型'"
      width="600px"
    >
      <el-form
        :model="whoExhibitForm"
        ref="whoExhibitFormRef"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="whoExhibitForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="whoExhibitForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrl">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="handleWhoExhibitImageSuccess"
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="whoExhibitForm.imageUrl"
                :src="whoExhibitForm.imageUrl"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="whoExhibitForm.imageUrl"
              placeholder="或直接输入图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number
            v-model="whoExhibitForm.sortOrder"
            :min="0"
            :max="999"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="whoExhibitForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showWhoExhibitDialog = false">取消</el-button>
        <el-button type="primary" @click="saveWhoExhibitItem" :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 添加/编辑参展报名对话框 -->
    <el-dialog
      v-model="showRegistrationDialog"
      :title="editingRegistration ? '编辑参展报名' : '添加参展报名'"
      width="600px"
    >
      <el-form
        :model="registrationForm"
        ref="registrationFormRef"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="registrationForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="registrationForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-select
            v-model="registrationForm.icon"
            placeholder="选择图标"
            style="width: 200px"
          >
            <el-option label="Edit" value="Edit" />
            <el-option label="Document" value="Document" />
            <el-option label="List" value="List" />
            <el-option label="Check" value="Check" />
            <el-option label="Plus" value="Plus" />
          </el-select>
        </el-form-item>
        <el-form-item label="链接地址" prop="linkUrl">
          <el-input
            v-model="registrationForm.linkUrl"
            placeholder="请输入链接地址"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number
            v-model="registrationForm.sortOrder"
            :min="0"
            :max="999"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="registrationForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showRegistrationDialog = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveRegistrationItem"
          :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 添加/编辑展商服务对话框 -->
    <el-dialog
      v-model="showServiceDialog"
      :title="editingService ? '编辑展商服务' : '添加展商服务'"
      width="600px"
    >
      <el-form :model="serviceForm" ref="serviceFormRef" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="serviceForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="serviceForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrl">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="handleServiceImageSuccess"
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="serviceForm.imageUrl"
                :src="serviceForm.imageUrl"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="serviceForm.imageUrl"
              placeholder="或直接输入图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-select
            v-model="serviceForm.icon"
            placeholder="选择图标"
            style="width: 200px"
          >
            <el-option label="Service" value="Service" />
            <el-option label="Tools" value="Tools" />
            <el-option label="Setting" value="Setting" />
            <el-option label="Star" value="Star" />
            <el-option label="Trophy" value="Trophy" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number
            v-model="serviceForm.sortOrder"
            :min="0"
            :max="999"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="serviceForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showServiceDialog = false">取消</el-button>
        <el-button type="primary" @click="saveServiceItem" :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 添加/编辑展商评语对话框 -->
    <el-dialog
      v-model="showReviewDialog"
      :title="editingReview ? '编辑展商评语' : '添加展商评语'"
      width="600px"
    >
      <el-form :model="reviewForm" ref="reviewFormRef" label-width="100px">
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            v-model="reviewForm.companyName"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="评价人" prop="reviewerName">
          <el-input
            v-model="reviewForm.reviewerName"
            placeholder="请输入评价人姓名"
          />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="reviewForm.position" placeholder="请输入职位" />
        </el-form-item>
        <el-form-item label="评语内容" prop="content">
          <el-input
            v-model="reviewForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入评语内容"
          />
        </el-form-item>
        <el-form-item label="评分" prop="rating">
          <el-rate v-model="reviewForm.rating" show-score />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="handleReviewAvatarSuccess"
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="reviewForm.avatar"
                :src="reviewForm.avatar"
                class="uploaded-avatar"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="reviewForm.avatar"
              placeholder="或直接输入头像URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="reviewForm.sortOrder" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="reviewForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showReviewDialog = false">取消</el-button>
        <el-button type="primary" @click="saveReviewItem" :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 编辑展商系统对话框 -->
    <el-dialog
      v-model="showExhibitorSystemDialog"
      title="编辑展商系统"
      width="600px"
    >
      <el-form
        :model="exhibitorSystemForm"
        ref="exhibitorSystemFormRef"
        label-width="100px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="exhibitorSystemForm.title"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="exhibitorSystemForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrl">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="handleExhibitorSystemImageSuccess"
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="exhibitorSystemForm.imageUrl"
                :src="exhibitorSystemForm.imageUrl"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="exhibitorSystemForm.imageUrl"
              placeholder="或直接输入图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="exhibitorSystemForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showExhibitorSystemDialog = false">取消</el-button>
        <el-button type="primary" @click="saveExhibitorSystem" :loading="saving"
          >保存</el-button
        >
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
        v-loading="saving"
      >
        <el-form-item label="页面类型" prop="pageType">
          <el-select
            v-model="editForm.pageType"
            placeholder="请选择页面类型"
            disabled
          >
            <el-option label="为何参展" value="why-exhibit" />
            <el-option label="谁来观展" value="who-exhibit" />
            <el-option label="参展报名" value="registration" />
            <el-option label="展商系统" value="exhibitor-system" />
            <el-option label="展商服务" value="service" />
            <el-option label="展商评语" value="review" />
          </el-select>
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" placeholder="请输入标题" />
        </el-form-item>

        <!-- <el-form-item label="副标题">
          <el-input v-model="editForm.subtitle" placeholder="请输入副标题" />
        </el-form-item> -->

        <el-form-item label="描述">
          <el-input
            v-model="editForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述"
          />
        </el-form-item>

        <el-form-item label="页面内容" prop="content">
          <RichTextEditor v-model="editForm.content" />
        </el-form-item>

        <el-form-item label="主图片">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="
                (response) => handleImageSuccess(response, 'imageUrl')
              "
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="editForm.imageUrl"
                :src="editForm.imageUrl"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="editForm.imageUrl"
              placeholder="或直接输入图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>

        <el-form-item label="背景图片">
          <div class="image-upload-container">
            <el-upload
              class="image-uploader"
              :action="uploadAction"
              :headers="uploadHeaders"
              :data="{ type: 'subpage' }"
              :show-file-list="false"
              :on-success="
                (response) => handleImageSuccess(response, 'backgroundImage')
              "
              :before-upload="beforeImageUpload"
              accept="image/*"
            >
              <img
                v-if="editForm.backgroundImage"
                :src="editForm.backgroundImage"
                class="uploaded-image"
              />
              <el-icon v-else class="image-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-model="editForm.backgroundImage"
              placeholder="或直接输入背景图片URL"
              style="margin-top: 10px"
            />
          </div>
        </el-form-item>

        <el-form-item label="视频链接">
          <el-input v-model="editForm.videoUrl" placeholder="请输入视频链接" />
        </el-form-item>

        <el-form-item label="外部链接">
          <el-input v-model="editForm.linkUrl" placeholder="请输入外部链接" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="editForm.sortOrder" :min="0" :max="999" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="editForm.status">
            <el-radio label="active">已发布</el-radio>
            <el-radio label="inactive">草稿</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="推荐">
          <el-switch v-model="editForm.isFeatured" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePageContent" :loading="saving">
          {{ isEditMode ? "更新" : "新增" }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { subpageApi as adminSubpageApi } from "@/api/admin";
import RichTextEditor from "@/components/RichTextEditor.vue";
import { subpageApi as siteSubpageApi } from "@/api/user";
import { Check, View, Plus, Edit, Search } from "@element-plus/icons-vue";
import config from "@/config";
import CarouselManager from "@/components/admin/CarouselManager.vue";

export default {
  name: "AdminExhibitorContent",
  components: {
    Check,
    View,
    Plus,
    Edit,
    Search,
    RichTextEditor,
    CarouselManager,
  },
  setup() {
    const loading = ref(false);
    const saving = ref(false);
    const activeTab = ref("why-exhibit");
    const editDialogVisible = ref(false);
    const currentPageKey = ref("");
    const currentPageTitle = ref("");
    const isEditMode = ref(false);
    const editFormRef = ref(null);

    // 对话框状态
    const showRegistrationDialog = ref(false);
    const editingRegistration = ref(null);
    const showServiceDialog = ref(false);
    const editingService = ref(null);
    const showReviewDialog = ref(false);
    const editingReview = ref(null);
    const showExhibitorSystemDialog = ref(false);
    const showWhyExhibitDialog = ref(false);
    const editingWhyExhibit = ref(null);
    const showWhoExhibitDialog = ref(false);
    const editingWhoExhibit = ref(null);

    // 搜索和筛选
    const searchText = ref("");
    const statusFilter = ref("");

    // 页面数据存储 - 改为数组形式
    const pageData = reactive({
      "why-exhibit": [],
      "who-exhibit": [],
      registration: [],
      "exhibitor-system": [],
      service: [],
      review: [],
    });

    // 编辑表单
    const editForm = reactive({
      id: null,
      title: "",
      subtitle: "",
      description: "",
      content: "",
      pageType: "",
      imageUrl: "",
      backgroundImage: "",
      videoUrl: "",
      linkUrl: "",
      sortOrder: 0,
      status: "active",
      isFeatured: false,
    });

    // 表单验证规则
    const editRules = reactive({
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      pageType: [
        { required: true, message: "请选择页面类型", trigger: "change" },
      ],
      content: [{ required: true, message: "请输入页面内容", trigger: "blur" }],
    });

    // 表单默认值
    const defaultForm = {
      id: null,
      title: "",
      subtitle: "",
      description: "",
      content: "",
      pageType: "",
      imageUrl: "",
      backgroundImage: "",
      videoUrl: "",
      linkUrl: "",
      sortOrder: 0,
      status: "active",
      isFeatured: false,
    };

    // 谁来观展表单
    const whoExhibitForm = reactive({
      title: "",
      description: "",
      imageUrl: "",
      sortOrder: 0,
      status: "active",
    });

    // 参展报名表单
    const registrationForm = reactive({
      title: "",
      description: "",
      icon: "Edit",
      linkUrl: "",
      sortOrder: 0,
      status: "active",
    });

    // 展商系统表单
    const exhibitorSystemForm = reactive({
      title: "",
      content: "",
      imageUrl: "",
      status: "active",
    });

    // 展商服务表单
    const serviceForm = reactive({
      title: "",
      description: "",
      imageUrl: "",
      icon: "Service",
      sortOrder: 0,
      status: "active",
    });

    // 展商评语表单
    const reviewForm = reactive({
      companyName: "",
      reviewerName: "",
      position: "",
      content: "",
      rating: 5,
      avatar: "",
      sortOrder: 0,
      status: "active",
    });

    // 表单验证规则
    const whyExhibitRules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      description: [{ required: true, message: "请输入描述", trigger: "blur" }],
    };

    const whoExhibitRules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      description: [{ required: true, message: "请输入描述", trigger: "blur" }],
    };

    const registrationRules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      description: [{ required: true, message: "请输入描述", trigger: "blur" }],
    };

    const exhibitorSystemRules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      content: [{ required: true, message: "请输入内容", trigger: "blur" }],
    };

    const serviceRules = {
      title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      description: [{ required: true, message: "请输入描述", trigger: "blur" }],
    };

    const reviewRules = {
      companyName: [
        { required: true, message: "请输入公司名称", trigger: "blur" },
      ],
      reviewerName: [
        { required: true, message: "请输入评价人姓名", trigger: "blur" },
      ],
      content: [{ required: true, message: "请输入评语内容", trigger: "blur" }],
    };

    // 上传配置
    const apiConfig = config.getApiConfig();
    const uploadAction = ref(`${apiConfig.baseURL}/api/upload/image`);
    const videoUploadAction = ref(`${apiConfig.baseURL}/api/upload/video`);
    const uploadHeaders = ref({
      token: localStorage.getItem("adminToken") || "",
    });
    const videoUploading = ref(false);

    // 加载为何参展数据
    const loadWhyExhibitData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "why-exhibit"
        );
        if (response && response.code === "200" && response.data) {
          let contentData = [];
          if (response.data.content) {
            try {
              contentData = JSON.parse(response.data.content);
            } catch (e) {
              contentData = [];
            }
          }
          whyExhibitList.value = contentData;
        }
      } catch (error) {
        console.error("加载为何参展数据失败:", error);
      }
    };

    // 加载谁来观展数据
    const loadWhoExhibitData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "who-exhibit"
        );
        if (response && response.code === "200" && response.data) {
          let contentData = [];
          if (response.data.content) {
            try {
              contentData = JSON.parse(response.data.content);
            } catch (e) {
              contentData = [];
            }
          }
          whoExhibitList.value = contentData;
        }
      } catch (error) {
        console.error("加载谁来观展数据失败:", error);
      }
    };

    // 加载展商系统数据
    const loadExhibitorSystemData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "exhibitor-system"
        );
        if (response && response.code === "200" && response.data) {
          exhibitorSystemData.value = response.data;
        }
      } catch (error) {
        console.error("加载展商系统数据失败:", error);
      }
    };

    // 加载参展报名数据
    const loadRegistrationData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "exhibition-registration"
        );
        if (response && response.code === "200" && response.data) {
          let contentData = [];
          if (response.data.content) {
            try {
              contentData = JSON.parse(response.data.content);
            } catch (e) {
              contentData = [];
            }
          }
          registrationList.value = contentData;
        }
      } catch (error) {
        console.error("加载参展报名数据失败:", error);
      }
    };

    // 加载展商服务数据
    const loadServiceData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "exhibitor-services"
        );
        if (response && response.code === "200" && response.data) {
          let contentData = [];
          if (response.data.content) {
            try {
              contentData = JSON.parse(response.data.content);
            } catch (e) {
              contentData = [];
            }
          }
          serviceList.value = contentData;
        }
      } catch (error) {
        console.error("加载展商服务数据失败:", error);
      }
    };

    // 加载展商评语数据
    const loadReviewData = async () => {
      try {
        const response = await siteSubpageApi.getSubpageByKey(
          "exhibitors",
          "exhibitor-reviews"
        );
        if (response && response.code === "200" && response.data) {
          let contentData = [];
          if (response.data.content) {
            try {
              contentData = JSON.parse(response.data.content);
            } catch (e) {
              contentData = [];
            }
          }
          reviewList.value = contentData;
        }
      } catch (error) {
        console.error("加载展商评语数据失败:", error);
      }
    };

    // 添加为何参展项目
    const addWhyExhibitItem = () => {
      editingWhyExhibit.value = null;
      Object.assign(whyExhibitForm, {
        title: "",
        description: "",
        imageUrl: "",
        sortOrder: whyExhibitList.value.length,
        status: "active",
      });
      showWhyExhibitDialog.value = true;
    };

    // 编辑为何参展项目
    const editWhyExhibitItem = (item) => {
      editingWhyExhibit.value = item;
      Object.assign(whyExhibitForm, { ...item });
      showWhyExhibitDialog.value = true;
    };

    // 删除为何参展项目
    const deleteWhyExhibitItem = async (item) => {
      try {
        await ElMessageBox.confirm("确定要删除这个参展理由吗？", "确认删除", {
          type: "warning",
        });

        const index = whyExhibitList.value.findIndex((i) => i === item);
        if (index > -1) {
          whyExhibitList.value.splice(index, 1);
          await saveWhyExhibitData();
          ElMessage.success("删除成功");
        }
      } catch (error) {
        if (error !== "cancel") {
          ElMessage.error("删除失败");
        }
      }
    };

    // 保存为何参展项目
    const saveWhyExhibitItem = async () => {
      saving.value = true;
      try {
        if (editingWhyExhibit.value) {
          const index = whyExhibitList.value.findIndex(
            (i) => i === editingWhyExhibit.value
          );
          if (index > -1) {
            whyExhibitList.value[index] = { ...whyExhibitForm };
          }
        } else {
          whyExhibitList.value.push({ ...whyExhibitForm });
        }

        await saveWhyExhibitData();
        showWhyExhibitDialog.value = false;
        ElMessage.success("保存成功");
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 保存为何参展数据到后端
    const saveWhyExhibitData = async () => {
      const contentData = {
        pageKey: "exhibitors",
        sectionKey: "why-exhibit",
        title: "为何参展",
        content: JSON.stringify(whyExhibitList.value),
        status: "active",
      };

      const existingResponse = await siteSubpageApi.getSubpageByKey(
        "exhibitors",
        "why-exhibit"
      );
      if (
        existingResponse &&
        existingResponse.code === "200" &&
        existingResponse.data
      ) {
        contentData.id = existingResponse.data.id;
        await adminSubpageApi.updateSubpage(contentData);
      } else {
        await adminSubpageApi.addSubpage(contentData);
      }
    };

    // 添加谁来观展项目
    const addWhoExhibitItem = () => {
      editingWhoExhibit.value = null;
      Object.assign(whoExhibitForm, {
        title: "",
        description: "",
        imageUrl: "",
        sortOrder: whoExhibitList.value.length,
        status: "active",
      });
      showWhoExhibitDialog.value = true;
    };

    // 编辑谁来观展项目
    const editWhoExhibitItem = (item) => {
      editingWhoExhibit.value = item;
      Object.assign(whoExhibitForm, { ...item });
      showWhoExhibitDialog.value = true;
    };

    // 删除谁来观展项目
    const deleteWhoExhibitItem = async (item) => {
      try {
        await ElMessageBox.confirm("确定要删除这个参展商类型吗？", "确认删除", {
          type: "warning",
        });

        const index = whoExhibitList.value.findIndex((i) => i === item);
        if (index > -1) {
          whoExhibitList.value.splice(index, 1);
          await saveWhoExhibitData();
          ElMessage.success("删除成功");
        }
      } catch (error) {
        if (error !== "cancel") {
          ElMessage.error("删除失败");
        }
      }
    };

    // 保存谁来观展项目
    const saveWhoExhibitItem = async () => {
      saving.value = true;
      try {
        if (editingWhoExhibit.value) {
          const index = whoExhibitList.value.findIndex(
            (i) => i === editingWhoExhibit.value
          );
          if (index > -1) {
            whoExhibitList.value[index] = { ...whoExhibitForm };
          }
        } else {
          whoExhibitList.value.push({ ...whoExhibitForm });
        }

        await saveWhoExhibitData();
        showWhoExhibitDialog.value = false;
        ElMessage.success("保存成功");
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 保存谁来观展数据到后端
    const saveWhoExhibitData = async () => {
      const contentData = {
        pageKey: "exhibitors",
        sectionKey: "who-exhibit",
        title: "谁来观展",
        content: JSON.stringify(whoExhibitList.value),
        status: "active",
      };

      const existingResponse = await siteSubpageApi.getSubpageByKey(
        "exhibitors",
        "who-exhibit"
      );
      if (
        existingResponse &&
        existingResponse.code === "200" &&
        existingResponse.data
      ) {
        contentData.id = existingResponse.data.id;
        await adminSubpageApi.updateSubpage(contentData);
      } else {
        await adminSubpageApi.addSubpage(contentData);
      }
    };

    // 编辑展商系统
    const editExhibitorSystem = () => {
      Object.assign(exhibitorSystemForm, { ...exhibitorSystemData.value });
      showExhibitorSystemDialog.value = true;
    };

    // 保存展商系统
    const saveExhibitorSystem = async () => {
      saving.value = true;
      try {
        const contentData = {
          pageKey: "exhibitors",
          sectionKey: "exhibitor-system",
          title: exhibitorSystemForm.title,
          content: exhibitorSystemForm.content,
          imageUrl: exhibitorSystemForm.imageUrl,
          status: exhibitorSystemForm.status,
        };

        if (exhibitorSystemData.value.id) {
          contentData.id = exhibitorSystemData.value.id;
          await adminSubpageApi.updateSubpage(contentData);
        } else {
          await adminSubpageApi.addSubpage(contentData);
        }

        exhibitorSystemData.value = { ...exhibitorSystemForm };
        showExhibitorSystemDialog.value = false;
        ElMessage.success("保存成功");
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 图片上传成功处理
    const handleWhyExhibitImageSuccess = (response) => {
      if (response && response.data) {
        whyExhibitForm.imageUrl = response.data.url;
      }
    };

    const handleWhoExhibitImageSuccess = (response) => {
      if (response && response.data) {
        whoExhibitForm.imageUrl = response.data.url;
      }
    };

    const handleExhibitorSystemImageSuccess = (response) => {
      if (response && response.data) {
        exhibitorSystemForm.imageUrl = response.data.url;
      }
    };

    // 图片上传前验证
    const beforeImageUpload = (file) => {
      const isImage = file.type.startsWith("image/");
      const isLt2M = file.size / 1024 / 1024 < 15;

      if (!isImage) {
        ElMessage.error("只能上传图片文件!");
        return false;
      }
      if (!isLt2M) {
        ElMessage.error("图片大小不能超过 15MB!");
        return false;
      }
      return true;
    };

    // 预览效果
    const handlePreview = () => {
      window.open("/exhibitors", "_blank");
    };

    // 对话框标题
    const dialogTitle = computed(() => {
      return isEditMode.value
        ? `编辑页面 - ${currentPageTitle.value}`
        : "新增页面";
    });

    // 获取页面数据列表（带搜索和筛选）
    const getPageList = (pageKey) => {
      let list = pageData[pageKey] || [];

      // 搜索筛选
      if (searchText.value) {
        const searchLower = searchText.value.toLowerCase();
        list = list.filter(
          (item) =>
            item.title.toLowerCase().includes(searchLower) ||
            getContentField(item, "description")
              .toLowerCase()
              .includes(searchLower) ||
            getContentField(item, "subtitle")
              .toLowerCase()
              .includes(searchLower)
        );
      }

      // 状态筛选
      if (statusFilter.value) {
        list = list.filter((item) => item.status === statusFilter.value);
      }

      return list;
    };

    // 获取页面数据（单个）
    const getPageData = (pageKey) => {
      const data = pageData[pageKey];
      if (Array.isArray(data) && data.length > 0) {
        return data[0];
      }
      return {};
    };

    // 获取content字段中的特定字段
    const getContentField = (row, field) => {
      if (!row.content) return "";

      // 如果content是纯文本，直接返回
      if (
        typeof row.content === "string" &&
        !row.content.trim().startsWith("{") &&
        !row.content.trim().startsWith("[")
      ) {
        // 如果是请求content字段本身，返回纯文本
        if (field === "content") {
          return row.content;
        }
        // 其他字段在纯文本情况下返回空
        return "";
      }

      try {
        const contentData =
          typeof row.content === "string"
            ? JSON.parse(row.content)
            : row.content;
        const value = contentData[field];
        // 对于布尔值，直接返回
        if (typeof value === "boolean") {
          return value;
        }
        // 对于字符串，返回字符串值
        return value || "";
      } catch (e) {
        // 如果JSON解析失败，说明是纯文本
        if (field === "content") {
          return row.content;
        }
        return "";
      }
    };

    // 加载所有页面数据
    const loadAllPageData = async () => {
      const pageKeys = [
        "why-exhibit",
        "who-exhibit",
        "registration",
        "exhibitor-system",
        "service",
        "review",
      ];

      for (const pageKey of pageKeys) {
        try {
          const response = await adminSubpageApi.getSubpageList(
            "exhibitors",
            pageKey
          );
          if (response && response.code === "200" && response.data) {
            pageData[pageKey] = response.data || [];
          } else {
            // 如果没有数据，使用模拟数据
            pageData[pageKey] = getMockData(pageKey);
          }
        } catch (error) {
          console.error(`加载${pageKey}数据失败:`, error);
          // 使用模拟数据
          pageData[pageKey] = getMockData(pageKey);
        }
      }
    };

    // 获取模拟数据
    const getMockData = (pageKey) => {
      const mockData = {
        "why-exhibit": [
          {
            id: 1,
            pageKey: "exhibitors",
            sectionKey: "why-exhibit",
            title: "展示最新产品",
            content: JSON.stringify({
              subtitle: "产品展示平台",
              description: "为参展商提供最佳的产品展示平台",
              content: "<p>展示最新产品和技术...</p>",
              backgroundImage:
                "https://via.placeholder.com/400x300/4A90E2/FFFFFF?text=Why+Exhibit+BG",
              videoUrl: "",
              isFeatured: true,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/4A90E2/FFFFFF?text=Why+Exhibit",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
        "who-exhibit": [
          {
            id: 2,
            pageKey: "exhibitors",
            sectionKey: "who-exhibit",
            title: "制造业企业",
            content: JSON.stringify({
              subtitle: "制造业参展商",
              description: "制造业相关企业参展",
              content: "<p>制造业企业参展介绍...</p>",
              backgroundImage: "",
              videoUrl: "",
              isFeatured: false,
            }),
            imageUrl:
              "https://via.placeholder.com/300x200/50C878/FFFFFF?text=Who+Exhibit",
            linkUrl: "",
            sortOrder: 1,
            status: "active",
            createdTime: "2024-01-15 10:00:00",
          },
        ],
      };
      return mockData[pageKey] || [];
    };

    // 显示新增对话框
    const showAddDialog = (pageType) => {
      isEditMode.value = false;
      currentPageKey.value = pageType;
      currentPageTitle.value = getPageTypeName(pageType);
      Object.assign(editForm, { ...defaultForm, pageType });
      editDialogVisible.value = true;
    };

    // 获取页面类型名称
    const getPageTypeName = (pageType) => {
      const typeNames = {
        "why-exhibit": "为何参展",
        "who-exhibit": "谁来观展",
        registration: "参展报名",
        "exhibitor-system": "展商系统",
        service: "展商服务",
        review: "展商评语",
      };
      return typeNames[pageType] || pageType;
    };

    // 编辑页面项
    const editPageItem = (item) => {
      isEditMode.value = true;
      currentPageKey.value = item.pageType || activeTab.value;
      currentPageTitle.value =
        item.title || getPageTypeName(currentPageKey.value);

      // 解析content字段中的JSON数据
      let parsedContent = {};
      if (item.content) {
        try {
          parsedContent =
            typeof item.content === "string"
              ? JSON.parse(item.content)
              : item.content;
        } catch (e) {
          // 如果解析失败，将content作为纯文本处理
          parsedContent = { content: item.content };
        }
      }

      Object.assign(editForm, {
        id: item.id || null,
        title: item.title || "",
        subtitle: item.subtitle || parsedContent.subtitle || "",
        description: item.description || parsedContent.description || "",
        content: parsedContent.content || item.content || "",
        pageType: item.pageType || activeTab.value,
        imageUrl: item.imageUrl || parsedContent.imageUrl || "",
        backgroundImage:
          item.backgroundImage || parsedContent.backgroundImage || "",
        videoUrl: item.videoUrl || parsedContent.videoUrl || "",
        linkUrl: item.linkUrl || parsedContent.linkUrl || "",
        sortOrder: item.sortOrder || 0,
        status: item.status || "active",
        isFeatured: item.isFeatured || false,
      });

      editDialogVisible.value = true;
    };

    // 删除页面项
    const deletePageItem = async (item) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除"${item.title}"吗？`,
          "确认删除",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        // 调用API删除
        if (item.id) {
          await adminSubpageApi.deleteSubpage(item.id);
        }

        // 从本地数据中移除
        const pageKey = item.pageType || activeTab.value;
        const index = pageData[pageKey].findIndex((p) => p.id === item.id);
        if (index > -1) {
          pageData[pageKey].splice(index, 1);
        }

        ElMessage.success("删除成功");
      } catch (error) {
        if (error !== "cancel") {
          ElMessage.error("删除失败: " + (error.message || "未知错误"));
        }
      }
    };

    // 保存页面内容
    const savePageContent = async () => {
      // 表单验证
      if (editFormRef.value) {
        await editFormRef.value.validate();
      }

      saving.value = true;
      try {
        // 构建提交数据
        const formData = {
          id: editForm.id,
          pageKey: "exhibitors",
          sectionKey: editForm.pageType,
          title: editForm.title,
          content: JSON.stringify({
            subtitle: editForm.subtitle,
            description: editForm.description,
            content: editForm.content,
            backgroundImage: editForm.backgroundImage,
            videoUrl: editForm.videoUrl,
            isFeatured: editForm.isFeatured,
          }),
          imageUrl: editForm.imageUrl,
          linkUrl: editForm.linkUrl,
          sortOrder: editForm.sortOrder,
          status: editForm.status,
        };

        // 调用API保存
        if (isEditMode.value && editForm.id) {
          await adminSubpageApi.updateSubpage(formData);
        } else {
          await adminSubpageApi.addSubpage(formData);
        }

        // 更新本地数据
        const pageKey = editForm.pageType;
        const newItem = {
          ...formData,
          subtitle: editForm.subtitle,
          description: editForm.description,
          backgroundImage: editForm.backgroundImage,
          videoUrl: editForm.videoUrl,
          isFeatured: editForm.isFeatured,
          createdAt: isEditMode.value
            ? pageData[pageKey].find((item) => item.id === editForm.id)
                ?.createdAt || new Date().toISOString()
            : new Date().toISOString(),
        };

        if (isEditMode.value && editForm.id) {
          // 更新现有项
          const index = pageData[pageKey].findIndex(
            (item) => item.id === editForm.id
          );
          if (index > -1) {
            pageData[pageKey][index] = newItem;
          }
        } else {
          // 添加新项
          newItem.id = Date.now(); // 临时ID，实际应该从API返回
          pageData[pageKey].push(newItem);
        }

        editDialogVisible.value = false;
        ElMessage.success(isEditMode.value ? "更新成功" : "新增成功");

        // 重新加载数据以确保数据同步
        await loadAllPageData();
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 预览图片
    const previewImages = (row) => {
      const images = [];
      if (row.imageUrl) {
        images.push(row.imageUrl);
      }
      const backgroundImage = getContentField(row, "backgroundImage");
      if (backgroundImage) {
        images.push(backgroundImage);
      }

      if (images.length > 0) {
        // 使用MessageBox显示图片
        ElMessageBox.alert(
          `<div style="text-align: center;">
            ${images
              .map(
                (img) =>
                  `<img src="${img}" style="max-width: 100%; max-height: 400px; margin: 10px; border-radius: 8px;" />`
              )
              .join("")}
          </div>`,
          `图片预览 - ${row.title}`,
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "关闭",
            customClass: "image-preview-dialog",
          }
        );
      }
    };

    // 预览内容
    const previewContent = (row) => {
      const content = getContentField(row, "content");
      if (content) {
        ElMessageBox.alert(content, `预览内容 - ${row.title}`, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "关闭",
          customClass: "content-preview-dialog",
        });
      } else {
        ElMessage.info("暂无内容可预览");
      }
    };

    // 去除HTML标签
    const stripHtml = (html) => {
      if (!html) return "";
      const tmp = document.createElement("div");
      tmp.innerHTML = html;
      return tmp.textContent || tmp.innerText || "";
    };

    // 搜索处理
    const handleSearch = () => {
      // 搜索逻辑已在getPageList中实现
    };

    // 筛选处理
    const handleFilter = () => {
      // 筛选逻辑已在getPageList中实现
    };

    // 图片上传成功处理
    const handleImageSuccess = (response, field) => {
      if (response && (response.code === "200" || response.code === 200)) {
        editForm[field] = response.data.url;
        ElMessage.success("图片上传成功!");
      } else {
        ElMessage.error("图片上传失败!");
      }
    };

    // 视频上传成功处理
    const handleVideoSuccess = (response) => {
      videoUploading.value = false;
      if (response && (response.code === "200" || response.code === 200)) {
        editForm.videoUrl = response.data.url;
        ElMessage.success("视频上传成功!");
      } else {
        ElMessage.error("视频上传失败!");
      }
    };

    // 视频上传前验证
    const beforeVideoUpload = (file) => {
      const isVideo = file.type.startsWith("video/");
      const isLt50M = file.size / 1024 / 1024 < 50;

      if (!isVideo) {
        ElMessage.error("只能上传视频文件!");
        return false;
      }
      if (!isLt50M) {
        ElMessage.error("视频大小不能超过 50MB!");
        return false;
      }
      videoUploading.value = true;
      return true;
    };

    // 添加参展报名项目
    const addRegistrationItem = () => {
      editingRegistration.value = null;
      Object.assign(registrationForm, {
        title: "",
        description: "",
        icon: "Edit",
        linkUrl: "",
        sortOrder: registrationList.value.length,
        status: "active",
      });
      showRegistrationDialog.value = true;
    };

    // 编辑参展报名项目
    const editRegistrationItem = (item) => {
      editingRegistration.value = item;
      Object.assign(registrationForm, { ...item });
      showRegistrationDialog.value = true;
    };

    // 删除参展报名项目
    const deleteRegistrationItem = async (item) => {
      try {
        await ElMessageBox.confirm("确定要删除这个报名信息吗？", "确认删除", {
          type: "warning",
        });

        const index = registrationList.value.findIndex((i) => i === item);
        if (index > -1) {
          registrationList.value.splice(index, 1);
          await saveRegistrationData();
          ElMessage.success("删除成功");
        }
      } catch (error) {
        if (error !== "cancel") {
          ElMessage.error("删除失败");
        }
      }
    };

    // 保存参展报名项目
    const saveRegistrationItem = async () => {
      saving.value = true;
      try {
        if (editingRegistration.value) {
          const index = registrationList.value.findIndex(
            (i) => i === editingRegistration.value
          );
          if (index > -1) {
            registrationList.value[index] = { ...registrationForm };
          }
        } else {
          registrationList.value.push({ ...registrationForm });
        }

        await saveRegistrationData();
        showRegistrationDialog.value = false;
        ElMessage.success("保存成功");
      } catch (error) {
        ElMessage.error("保存失败: " + (error.message || "未知错误"));
      } finally {
        saving.value = false;
      }
    };

    // 保存参展报名数据到后端
    const saveRegistrationData = async () => {
      const contentData = {
        pageKey: "exhibitors",
        sectionKey: "exhibition-registration",
        title: "参展报名",
        content: JSON.stringify(registrationList.value),
        status: "active",
      };

      const existingResponse = await siteSubpageApi.getSubpageByKey(
        "exhibitors",
        "exhibition-registration"
      );
      if (
        existingResponse &&
        existingResponse.code === "200" &&
        existingResponse.data
      ) {
        contentData.id = existingResponse.data.id;
        await adminSubpageApi.updateSubpage(contentData);
      } else {
        await adminSubpageApi.addSubpage(contentData);
      }
    };

    onMounted(() => {
      loadAllPageData();
    });

    return {
      loading,
      saving,
      activeTab,
      editDialogVisible,
      currentPageKey,
      currentPageTitle,
      isEditMode,
      editFormRef,
      showRegistrationDialog,
      editingRegistration,
      showServiceDialog,
      editingService,
      showReviewDialog,
      editingReview,
      showExhibitorSystemDialog,
      showWhyExhibitDialog,
      editingWhyExhibit,
      showWhoExhibitDialog,
      editingWhoExhibit,
      searchText,
      statusFilter,
      pageData,
      editForm,
      editRules,
      defaultForm,
      dialogTitle,
      getPageList,
      getPageData,
      getContentField,
      loadAllPageData,
      getMockData,
      showAddDialog,
      getPageTypeName,
      editPageItem,
      deletePageItem,
      savePageContent,
      previewImages,
      previewContent,
      stripHtml,
      handleSearch,
      handleFilter,
      handleImageSuccess,
      handleVideoSuccess,
      beforeImageUpload,
      beforeVideoUpload,
      videoUploading,
      uploadAction,
      videoUploadAction,
      uploadHeaders,
      handlePreview,
    };
  },
};
</script>

<style scoped>
.admin-exhibitor-content {
  padding: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

.list-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-preview {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}

.content-preview:hover {
  color: #66b1ff;
}

.image-container {
  cursor: pointer;
  display: inline-block;
}

.image-container:hover {
  opacity: 0.8;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 178px;
  height: 178px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #409eff;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.uploaded-image {
  width: 178px;
  height: 178px;
  object-fit: cover;
  display: block;
}

:deep(.image-preview-dialog) {
  .el-message-box__content {
    padding: 20px;
  }
}

:deep(.content-preview-dialog) {
  .el-message-box__content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
}

.content-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
}

.page-preview {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #e9ecef;
}

.page-preview h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 16px;
}

.content-preview {
  color: #666;
  line-height: 1.6;
  margin: 10px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.table-image {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.table-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.uploaded-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 120px;
  height: 80px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #409eff;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .section-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
</style>
